import React from 'react'
import { BrowserRouter as Router, Redirect, Route, NavLink, Switch } from 'react-router-dom';
import './Book.css'

class Book extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
			bookList: [],
  	    };
    }
	componentDidMount() {
    	fetch('http://154.8.202.56:8081/book/sel', {
			method: 'post',
			body: JSON.stringify({}),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			this.setState({
				bookList: res
			});
		})
		.then(res=>{
			console.log(this.state.bookList)
		})
	}
    render () {
		const delbook =(topicsid)=>{
			let url = 'http://154.8.202.56:8081/book/del'
			fetch('http://154.8.202.56:8081/book/del', {
				method: 'post',
				body: JSON.stringify({topicsid:topicsid}),
				headers: {
			    	"Access-Control-Allow-Origin":"*",
			    	'content-type': 'application/json'
				},
				mode: 'cors'
			})
		}
		return (
			<table className='book_all' cellSpacing='0' cellPadding='0'>
				<thead>
					<tr className='book_head'>
						<th className='book_id'><p>ID</p></th>
						<th className='book_name'><p>书名</p></th>
						<th className='book_autor'><p>作者</p></th>
						<th className='book_uper'><p>推荐人ID</p></th>
						<th className='book_op'><p>操作</p></th> 
					</tr>
				</thead>
				<tbody>
					{
						this.state.bookList.map((item,idx)=>(
							<tr className='book_body' key={idx}>
								<td className='book_idd'><p>{item.topicsid}</p></td>
								<td className='book_namee'><p>{item.bookname}</p></td>
								<td className='book_autorr'><p>{item.name}</p></td>
								<td className='book_uperr'><p>{item.userid}</p></td>
								<td className='book_oper'><button onClick={() => {
									let arr = this.state.bookList;
									for(let i = 0; i < arr.length; i ++){
										if(arr[i].topicsid == item.topicsid){
											arr.splice(i, 1);
											break;
										}
									}
									this.setState({
										bookList: arr
									})
									delbook(item.topicsid);
									}}>删除</button></td>
							</tr>
						))
					}
				</tbody>
			</table>
    	);
  	}
}
export default Book
